/*动画按钮开始*/

@keyframes warn {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }
    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@keyframes warn1 {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }
    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.0;
    }
}

.containers {
    position: relative;
    width: 2.0rem;
    height: 2.0rem;
    left: 0.1rem;
    top: 0.1rem;
}

/* 保持大小不变的小圆点 */

.dot {
    position: absolute;
    width: 1rem;
    height: 1rem;
    left: 0.5rem;
    top: 0.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #14b31c;
    border-radius: 50%;
    background-color: #14b31c;
    /* 实心圆 ，如果没有这个就是一个小圆圈 */
    z-index: 2;
}

/* 产生动画（向外扩散变大）的圆圈 第一个圆 */

.pulse {
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #14b31c;
    border: 1px solid #14b31c;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s ease-out infinite;
    -moz-animation: warn 2s ease-out infinite;
    animation: warn 2s ease-out infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 0.3rem #3399ff;
    /* 阴影效果 */
}

/* 产生动画（向外扩散变大）的圆圈 第二个圆 */

.pulse1 {
    position: absolute;
    width: 2.0rem;
    height: 2.0rem;
    background: red;
    border: 1px solid #14b31c;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out infinite;
    -moz-animation: warn1 2s ease-out infinite;
    animation: warn1 2s ease-out infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #14b31c;
    /* 阴影效果 */
}

/*动画按钮结束*/